<template>
    <el-popover
            placement="bottom"
            trigger="click">
        <ul>
            <li>提醒一</li>
            <li>提醒二</li>
        </ul>
        <i slot="reference" class="el-icon-bell"></i>
    </el-popover>
</template>

<script>
export default {
    name: 'remind'
}
</script>

<style scoped>
.el-icon-bell {
    padding: 0 12px;
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
}
ul {
    margin: 0 -12px;
}
li {
    line-height: 36px;
    padding: 0 20px;
    margin: 0;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    outline: none;
}
li:hover {
    background-color: #ecf8f3;
    color: #68c79c;
}
</style>